<template>
  <div class="companyReportManagement item-space">
    <div class="wholeTitle borderBottom flex">
      报告管理：
    </div>
    <div class="content">
      <div class="flex flex-align-center">
        <div class="top flex flex-align-center">
          <div class="tiemText">报告名称：</div>
          <el-input v-model="mangaementStore.reportName" style="width: 240px" placeholder="请输入报告名称"/>
        </div>
        <button class="btn-baseStyle ml-4" style="background-color:#007FFF" @click="inquire">查询</button>
      </div>
      <div class="bottom mt-8 flex ">
        <div class="left mr-6 tableUIReset">
          <el-table
              height="500"
              v-loading="mangaementStore.table.tableLoading"
              stripe
              :data="mangaementStore.table.tableData"
              border
              style="width: 100%"
              header-row-class-name="rptableClassNmae"
          >
            <el-table-column prop="index" label="序号" width="90" header-align="center" align="center">
              <template #default="scope">
                {{ scope.$index + 1 + (mangaementStore.page - 1) * mangaementStore.limit }}
              </template>
            </el-table-column>
            <el-table-column v-for="(item,index) in mangaementStore.table.tableHeader" :prop="item.prop"
                             :label="item.name" header-align="center" align="center" :key="item.prop"/>
            <el-table-column label="操作" align="center" header-align="center">
              <template #default="scope">
                <div class="flex flex-justify-content-center">
                  <div class="tableScopeText pointer" @click="jumpDetail(scope.row.id,scope.row.reportName)">编辑模板
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="paginationFooter mt-10">
            <el-pagination
                :small="true"
                v-model:current-page="mangaementStore.page"
                v-model:page-size="mangaementStore.limit"
                :page-sizes="[10,20, 30,200, 300, 400]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="mangaementStore.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//组件

//接口


//api
import {reactive, ref} from 'vue';
import useMangaementStore from "@/store/modules/mangement/mangement";
import {useRoute, useRouter} from "vue-router";
//data
let mangaementStore = useMangaementStore()
let route = useRoute()
let router = useRouter()
/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
const inquire = () => {
  mangaementStore.page = 1
  mangaementStore.getStsReportList()
}

//分页
const handleSizeChange = () => {
  mangaementStore.getStsReportList()
}
const handleCurrentChange = () => {
  mangaementStore.getStsReportList()
}

const jumpDetail = (id: number | string, name: string) => {
  window.open(`/Management/editReportTemplate?id=${id}&title=编辑模板:${name}`)
}

mangaementStore.getStsReportList()
</script>

<style lang="scss" scoped>
.companyReportManagement {
  width: 100%;


  .content {

    .top {
      .tiemText {
        font-size: 18px;
      }
    }

    .bottom {
      .left {
        width: 100%;


      }
    }
  }
}

</style>
